<template>
    <div class="tmpl">
        <nav-bar title="图文详情"></nav-bar>
        <div class="photo-title">
            <p v-text="photoDetail.title">图片标题</p>
            <span>发起日期：{{photoDetail.add_time | convertDate}}</span>
            <span>{{photoDetail.click}}次浏览</span>
            <span>分类：{{photoDetail.category}}</span>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(photo,index) in photos" :key="index"
                class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!--<img :src="photo.src"/>-->
                <img class="preview-img" :src="photo.src"
                     height="100" @click="$preview.open(index,photos)"/>
            </li>
        </ul>
        <div class="photo-desc">
            <p v-html="photoDetail.content"></p>
        </div>

        <!--评论内容开始-->
        <!--使用子组件-->
        <comment :tid="pid"></comment>
        <!--评论内容结束-->
    </div>
</template>

<script>
    export default {
        name: "photoDetail",
        data() {
            return {
                photoDetail: {},//存放详情对象
                photos: [],//存放缩略图
                pid: this.$route.params.id,//记录当前图片id
            }
        },
        created() {
            //发起2个请求
            //图片详情
            this.$ajax.get('photos/getPhotos/' + this.pid)
                .then(res => {
                    this.photoDetail = res.data.message;
                })
                .catch(err => {
                    console.log(err)
                });
            //缩略图
            this.$ajax.get('thumbnail/getThumbnail/' + this.pid)
                .then(res => {
                    this.photos = res.data.message;
                    //forEach
                    this.photos.forEach((ele)=>{
                        ele.w = 600;
                        ele.h = 400;
                    })
                })
                .catch(err => {
                    console.log(err)
                });

        },

    }
</script>

<style scoped>
    li {
        list-style: none;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    .photo-title {
        overflow: hidden;
    }

    .photo-title,
    .photo-desc {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }

    .photo-title p {
        color: #13c2f7;
        font-size: 20px;
        font-weight: bold;
    }

    .photo-title span {
        margin-right: 20px;
    }

    .mui-table-view.mui-grid-view.mui-grid-9 {
        background-color: white;
        border: 0;
    }

    .mui-table-view.mui-grid-view.mui-grid-9 li {
        border: 0;
    }

    .photo-desc p {
        font-size: 18px;
    }

    .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
        padding: 2px 2px;
    }

    /*评论内容样式开始*/

    /*评论内容样式结束*/
</style>